<template>
    <AutoPage @getScale="getScale" title="改革创新赛道">
        <div class="btn-group">
            <div @click="changeBtnType(0)"
                :style="` background-image:url(${currentBtnIndex == 0 ? btnImg1 : btnImg2})`">全流程网上办案</div>
            <div @click="changeBtnType(1)"
                :style="` background-image:url(${currentBtnIndex == 1 ? btnImg1 : btnImg2})`">少年家事审判</div>
        </div>

        <swiper :options="swiperOptions" ref="swiper" class="swiper">
            <swiper-slide class="swiper-item">
                <div class="content-box">
                    <div class="grid-col-3">
                        <div>
                            <Card title="全流程网上办案率">
                                <CaseOnline />
                            </Card>
                        </div>
                        <div>
                            <Card title="原被告送达率">
                                <DeliveryRate />
                            </Card>
                        </div>
                    </div>
                    <div class="grid-col-flex">
                        <div>
                            <CenterModule />
                        </div>
                        <div class="flex-1">
                            <Card title="2024年8月——2025年3月全流程网上办案主要指标图">
                                <TimeRangeLines />
                            </Card>
                        </div>
                    </div>
                    <div class="grid-col-3">
                        <div>
                            <Card title="单套归档情况">
                                <ArchivingSituation />
                            </Card>
                        </div>
                        <div>
                            <Card title="数字庭审指标">
                                <DigitalTrial />
                            </Card>
                        </div>
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide class="swiper-item">
                <div class="content-box">
                    <div class="grid-col-flex">
                        <div class="h-300">
                            <Card title="近五年案件审理情况">
                                <CaseTrial />
                            </Card>
                        </div>
                        <div class="flex-1 mt-20">
                            <Card title="2025年一季度案件审理情况">
                                <CaseTrialSpring />
                            </Card>
                        </div>
                    </div>
                    <div class="grid-col-flex">
                        <div class="flex-1">
                            <Card title="荣誉奖励">
                                <Honor />
                            </Card>
                        </div>
                        <div class="flex-1 mt-20">
                            <Card title="1+10 少年家事审判制度">
                                <MechanismTrial />
                            </Card>
                        </div>
                        <div class="flex-1 mt-20">
                            <Card title="机制共建">
                                <MechanismBuild />
                            </Card>
                        </div>
                    </div>
                    <div class="grid-col-flex">
                        <div class="flex-1">
                            <Card title="精品案例">
                                <RefinedCase />
                            </Card>
                        </div>
                        <div class="flex-1 mt-20">
                            <Card title="双师课堂" :more="true" @clickMore="clickMore">
                                <DoubleTeacher />
                            </Card>
                        </div>
                        <div class="flex-1 mt-20">
                            <Card title="普法视频" :more="true" @clickMore="clickMore">
                                <LawVideo />
                            </Card>
                        </div>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
    </AutoPage>
</template>

<script>
import Card from '@/components/Card.vue'
import AutoPage from "@/components/AutoPage.vue";
import CaseOnline from './charts/case-online.vue'
import DeliveryRate from './charts/delivery-rate.vue'
import TimeRangeLines from './charts/time-range-lines.vue'
import ArchivingSituation from './charts/archiving-situation.vue'
import DigitalTrial from './charts/digital-trial.vue'
import CenterModule from './charts/center-module.vue'
import CaseTrial from './charts/case-trial.vue'
import CaseTrialSpring from './charts/case-trial-spring.vue'
import Honor from './charts/honor-page.vue'
import RefinedCase from './charts/refined-case.vue'
import DoubleTeacher from './charts/double-teacher.vue'
import LawVideo from './charts/law-video.vue'
import MechanismBuild from './charts/mechanism-build.vue'
import MechanismTrial from './charts/mechanism-trial.vue'

export default {
    name: 'ReformInnovation',
    components: {
        Card,
        AutoPage,
        DigitalTrial,
        Honor,
        CenterModule,
        CaseOnline,
        DeliveryRate,
        TimeRangeLines,
        ArchivingSituation,
        CaseTrial,
        CaseTrialSpring,
        RefinedCase,
        DoubleTeacher,
        LawVideo,
        MechanismBuild,
        MechanismTrial
    },
    data() {
        return {
            scale: 1,
            currentBtnIndex: 0,
            btnImg1: require('../../assets/nav_1.png'),
            btnImg2: require('../../assets/nav_2.png'),

            swiperOptions: {
                loop: false,
            },
        }
    },
    methods: {
        getScale(e) {
            this.scale = e;
        },
        changeBtnType(type) {
            this.currentBtnIndex = type
            this.$refs.swiper.swiper.slideTo(type)
        },
        clickMore(){

        }
    }
}
</script>

<style lang="less" scoped>
.btn-group {
    position: fixed;
    right: 30px;
    top: 60px;
    display: flex;
    z-index: 999999;

    &>div {
        width: 149px;
        height: 40px;
        background-image: url(../../assets/nav_1.png);
        background-size: cover;
        font-size: 16px;
        color: #FFFFFF;
        text-align: center;
        line-height: 36px;
        cursor: pointer;
    }

    &>div:first-child {
        margin: 0 10px 0 0;
    }
}

.swiper {
    width: 1920px;
    height: 100%;
    overflow: hidden;
}

.swiper-item {
    display: flex;
    flex-direction: column;

}

.content-box {
    flex: 1;
    width: 100%;
    padding: 0 35px 38px;
    display: flex;
    margin: 46px 0 0;
    overflow: hidden;
    position: relative;

    .grid-col-3 {
        display: flex;
        flex-direction: column;
        width: 520px;
        gap: 20px;
        position: relative;

        &>div {
            flex: 1;

        }
    }

    .grid-col-flex {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 0 20px;
        flex-shrink: 0;
        overflow: hidden;




        .flex-1 {
            flex: 1;
        }

        .h-300 {
            height: 300px;
        }

    }

    .mt-20 {
        margin-top: 20px;
    }
}
</style>